@use '@angular/material' as mat;

@import './story-point/story-point.component-theme';
@import './story-widget/story-widget.component-theme';
@import './story-comments/story-comments.component-theme';

$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1);

@mixin color($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);

  $grid-divider: 1px dashed map-get($foreground, divider);

  @include ngm-story-point($config-or-theme);
  @include ngm-story-widget($config-or-theme);
  @include ngm-story-comments($config-or-theme);

  .ngm-story {
    color: mat.get-color-from-palette($foreground, text);
  }

  .ngm-story__story-container {
    background: transparent;

    .ngm-story__point-tab-group {
      height: 100%;
      
      & > .mat-mdc-tab-header {
        --mdc-secondary-navigation-tab-container-height: 38px;
        .mdc-tab {
          min-width: unset;
        }
      }

      &.tabBarHidden > .mat-mdc-tab-header {
        display: none;
      }

      &:not(.tabBarHidden) > .mat-mdc-tab-body-wrapper {
        max-height: calc(100% - 2.5rem);
      }

      .mat-mdc-tab-body-wrapper {
        flex: 1;
        .mat-tab-body.mat-tab-body-active {
          overflow: hidden;
        }
      }
    }

    .ngm-story__filter-bar {
      .ngm-story__filter-bar-anchor {
        box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
      }
      .ngm-story__filter-bar-header, .pac-widget-filter-bar {
        z-index: 1;
      }

      .ngm-story__filter-bar-anchor,
      .ngm-story__filter-bar-header,
      .pac-widget-filter-bar {
        background-color: mat.get-color-from-palette($background, dialog);
      }

      .ngm-smart-filter-bar--content {
        flex-direction: column;
      }
    }

  }

  .ngm-story {
    --story-fullscreen-top: 0;

    .ngm-story-primary--add {
      position: absolute;
      bottom: 2rem;
      right: 2rem;
      z-index: 1;
    }

    .ngm-story--action-list {
      .mat-mdc-list-icon {
        border: 1px solid;
      }
    }

    .ngm-filter-type--exclude {
      text-decoration-line: line-through;
    }

    &.ngm-story--fullscreen {
      .ngm-story__container {
        position: fixed;
        width: 100%;
        top: var(--story-fullscreen-top);
        height: 100%;
        transition: all 500ms $ease-in-out-curve-function;
      }
      .ngm-story__toolbar {
        position: fixed;
        top: 5px - 55px;
        z-index: 2;
        opacity: 0;
        transition: all 500ms $ease-in-out-curve-function;

        &.compact {
          top: 5px - 45px;
        }

        &:hover {
          opacity: 1;
          top: 0;
        }
      }
    }

    .ngm-story__pagination {
      transition: 0.3s opacity;
      transform: translate3d(0, 0, 0);
      .ngm-story__pagination-bullet {
        background-color: mat.get-color-from-palette($primary, 100);

        &.ngm-story__pagination-bullet-active {
          background-color: mat.get-color-from-palette($accent);
        }
      }
    }
  }

}

@mixin density($config-or-theme) {
  .ngm-story__filter-bar {
    .ngm-story__filter-bar-header {
      padding: 0.5rem;
    }
  }
}

@mixin theme($theme) {
  $color: mat.get-color-config($theme);
  $density: mat.get-density-config($theme);
  $typography: mat.get-typography-config($theme);

  @if $color != null {
    @include color($color);
  }
  @if $density != null {
    @include density($density);
  }
  @if $typography != null {
    @include typography($typography);
  }
}
